<template>
  <section>
    <div class="container"
         v-loading="loading">

      <div>
        <el-select v-model="params.mid"
                   placeholder="请选择商户"
                   clearable
                   filterable>
          <el-option v-for="item in merchantData"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>

        <el-input placeholder="请输入通道名称"
                  style="width: 215px; margin-left: 10px"
                  v-model="params.channel_name"
                  clearable></el-input>

        <el-input placeholder="请输入通道备注"
                  style="width: 215px; margin-left: 10px"
                  v-model="params.remark"
                  clearable></el-input>

        <el-button circle
                   size="mini"
                   type="primary"
                   icon="el-icon-search"
                   style="margin-left: 10px"
                   @click="getData()"></el-button>

        <el-button type="primary"
                   icon="el-icon-plus"
                   size="mini"
                   @click="addMerchantChannelVisible = true">
          添加
        </el-button>
      </div>

      <el-table :data="data"
                style="margin-top: 20px">
        <el-table-column prop="merchant.name"
                         label="商户名称"
                         align="center"></el-table-column>
        <el-table-column prop="tag"
                         label="通道名称"
                         align="center"></el-table-column>
        <el-table-column prop="remark"
                         label="通道备注"
                         align="center"></el-table-column>
        <el-table-column label="笔数费"
                         align="center">
          <template slot-scope="scope">
            <span v-if="[false,undefined].includes(scope.row.fee_visible)">{{scope.row.repayment_fee}}</span>
            <el-input v-if="scope.row.fee_visible"
                      style="width: 150px"
                      class="saveRepayment"
                      v-model="scope.row.repayment_fee">
            </el-input>
            <el-link type="primary"
                     icon="el-icon-check"
                     style="margin-left: 5px"
                     @click="handleSaveRepaymentFee(scope.$index)"
                     v-if="scope.row.fee_visible">
            </el-link>
            <el-link type="primary"
                     icon="el-icon-close"
                     style="margin-left: 10px"
                     @click="handleSaveRepaymentVisible(scope.$index)"
                     v-if="scope.row.fee_visible">
            </el-link>
            <el-link type="primary"
                     icon="el-icon-edit"
                     style="margin-left: 5px"
                     @click="handleSaveRepaymentVisible(scope.$index)"
                     v-if="[false,undefined].includes(scope.row.fee_visible)">
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="税率"
                         align="center">
          <template slot-scope="scope">
            <span v-if="[false,undefined].includes(scope.row.point_visible)">{{scope.row.tax_point}}</span>
            <el-input v-if="scope.row.point_visible"
                      style="width: 150px"
                      class="saveRepayment"
                      v-model="scope.row.tax_point">
            </el-input>
            <el-link type="primary"
                     icon="el-icon-check"
                     style="margin-left: 5px"
                     @click="handleSavePointFee(scope.$index)"
                     v-if="scope.row.point_visible">
            </el-link>
            <el-link type="primary"
                     icon="el-icon-close"
                     style="margin-left: 10px"
                     @click="handleSavePointVisible(scope.$index)"
                     v-if="scope.row.point_visible">
            </el-link>
            <el-link type="primary"
                     icon="el-icon-edit"
                     style="margin-left: 5px"
                     @click="handleSavePointVisible(scope.$index)"
                     v-if="[false,undefined].includes(scope.row.point_visible)">
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-edit"
                       @click="handleBanksVisible(scope.row.id)">编辑银行费率</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination style="text-align: center; margin-top:20px"
                       background
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       layout="sizes, prev, pager, next"
                       :total="pagination.total"
                       :current-page.sync="pagination.page"
                       :page-size="pagination.pageSize"
                       :page-sizes="pageSizeSelect">
        </el-pagination>
      </div>

      <el-dialog :visible.sync="channelBanksVisible"
                 title="银行费率"
                 top="4vh">
        <div style="font-weight: 400;color: #1f2f3d;font-size: 22px; width:100%;text-align:center;">
          常用银行
        </div>
        <el-table :data="channelBanks.common_banks">
          <el-table-column label="银行名称"
                           prop="bank_name"
                           align="center"></el-table-column>
          <el-table-column label="费率"
                           align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入银行费率"
                        v-model="scope.row.rate"
                        style="width: 300px;"></el-input>
            </template>
          </el-table-column>
        </el-table>

        <div style="font-weight: 400;color: #1f2f3d;font-size: 22px; width:100%;text-align:center;margin-top: 10px">
          区域银行
        </div>
        <el-table :data="channelBanks.district_banks">
          <el-table-column label="银行名称"
                           prop="bank_name"
                           align="center"></el-table-column>
          <el-table-column label="费率"
                           align="center">
            <template slot-scope="scope">
              <el-input placeholder="请输入银行费率"
                        v-model="scope.row.rate"
                        style="width: 300px;"></el-input>
            </template>
          </el-table-column>
        </el-table>

        <div slot="footer"
             class="dialog-footer">
          <el-button @click="channelBanksVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="handleSaveBanksRate">保 存</el-button>
        </div>
      </el-dialog>

      <el-dialog title="新增商户通道"
                 :visible.sync="addMerchantChannelVisible"
                 width="800px"
                 top="2vh">
        <el-form :rules="rules"
                 :model="addMerchantChannel"
                 ref="addMerchantChannelForm">
          <el-form-item label="商户"
                        prop="m_id"
                        :label-width="formLabelWidth">
            <el-select v-model="addMerchantChannel.m_id"
                       clearable
                       style="width: 500px"
                       filterable
                       placeholder="请选择">
              <el-option v-for="item in merchantData"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="子通道"
                        prop="s_c_id"
                        :label-width="formLabelWidth">
            <el-select v-model="addMerchantChannel.s_c_id"
                       clearable
                       style="width: 500px"
                       filterable
                       remote
                       :remote-method="getSubChannelData"
                       placeholder="请输入通道名称">
              <el-option v-for="item in subChannel"
                         :key="item.id"
                         :label="'('+item.id+') ' + item.tag + ' ' +item.remark"
                         :value="item.id">
                <span style="float: left">{{ item.tag }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">
                  ({{item.id}})&nbsp;&nbsp;{{ item.remark }}
                </span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="代付笔数费"
                        prop="repayment_fee"
                        :label-width="formLabelWidth">
            <el-input v-model="addMerchantChannel.repayment_fee"
                      clearable
                      placeholder="请输入代付笔数费"
                      style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="区域银行消费费率"
                        prop="consume_rate"
                        :label-width="formLabelWidth">
            <el-input v-model="addMerchantChannel.consume_rate"
                      clearable
                      placeholder="请输入区域银行消费费率"
                      style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="税率"
                        prop="tax_point"
                        :label-width="formLabelWidth">
            <el-input v-model="addMerchantChannel.tax_point"
                      clearable
                      placeholder="请输入税率"
                      style="width: 500px"></el-input>
          </el-form-item>

          <el-form-item>
            <el-table :data="commonbanksData">
              <el-table-column label="银行名称"
                               prop="bank_name"
                               align="center"></el-table-column>
              <el-table-column label="费率"
                               prop="rate"
                               align="center">
                <template slot-scope="scope">
                  <el-input-number :controls="false"
                                   v-model="scope.row.rate"
                                   :precision="4"
                                   placeholder="请输入消费费率"
                                   style="width: 200px"></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>

        <div slot="footer"
             class="dialog-footer">
          <el-button @click="addMerchantChannelVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click="handleAddMerchantChannel('addMerchantChannelForm')">保 存</el-button>
        </div>
      </el-dialog>

    </div>
  </section>
</template>

<script>
import {
  getMerchantChannel,
  getMerchantList,
  getMerchantChannelBanks,
  saveMerchantChannel,
} from '@/api/modules/merchant'

import { getSubChannel } from '@/api/modules/channel'

export default {
  data() {
    return {
      data: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      params: {
        channel_name: null,
        mid: null,
        remark: null,
      },
      loading: false,
      pageSizeSelect: [10, 20, 30, 40, 50],
      merchantData: [],
      channelBanksVisible: false,
      channelBanks: [],
      saveChannelId: 0,
      saveRepaymentFeeVisible: false,
      subChannel: [],
      commonbanksData: [],
      addMerchantChannelVisible: false,
      addMerchantChannel: {},
      formLabelWidth: '150px',
      rules: {
        m_id: [{ required: true, message: '请选择商户', trigger: 'change' }],
        s_c_id: [
          { required: true, message: '请选择子通道', trigger: 'change' },
        ],
        repayment_fee: [
          { required: true, message: '请输入代付笔数费', trigger: 'blur' },
        ],
        consume_rate: [{ required: true, message: '请输入区域银行消费费率' }],
        tax_point: [{ required: true, message: '请输入税率' }],
      },
    }
  },

  created() {
    this.getData()
    this.getMerchantData()
  },

  methods: {
    getData() {
      this.loading = true
      getMerchantChannel({
        ...this.pagination,
        ...this.params,
      })
        .then((res) => {
          if (res.status) {
            this.data = res.data.list
            this.pagination = res.data.pagination
            this.commonbanksData = res.data.common_banks
          }

          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    getMerchantData() {
      getMerchantList().then((res) => {
        if (res.status) {
          this.merchantData = res.data.list
        }
      })
    },
    // 分页导航
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getData()
    },
    handleBanksVisible(id) {
      getMerchantChannelBanks({ id: id }).then((res) => {
        if (res.status) {
          this.saveChannelId = id
          this.channelBanksVisible = true
          this.channelBanks = res.data
        }
      })
    },
    handleSaveBanksRate() {
      this.loading = true
      saveMerchantChannel({
        banks_rate: this.channelBanks,
        id: this.saveChannelId,
      })
        .then((res) => {
          if (res.status) {
            this.channelBanksVisible = false
            this.channelBanks = []
            this.$message.success('保存成功')
          }
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    handleSaveRepaymentVisible(index) {
      if (this.data[index].fee_visible == true) {
        this.$set(this.data[index], 'fee_visible', false)
      } else {
        this.$set(this.data[index], 'fee_visible', true)
      }
    },
    handleSavePointVisible(index) {
      if (this.data[index].point_visible == true) {
        this.$set(this.data[index], 'point_visible', false)
      } else {
        this.$set(this.data[index], 'point_visible', true)
      }
    },
    handleSaveRepaymentFee(index) {
      this.handleSaveMerchantChannel(index).then((res) => {
        if (res) {
          this.handleSaveRepaymentVisible(index)
        }
      })
    },
    handleSavePointFee(index) {
      this.handleSaveMerchantChannel(index).then((res) => {
        if (res) {
          this.handleSavePointVisible(index)
        }
      })
    },
    handleSaveMerchantChannel(index) {
      this.loading = true
      return saveMerchantChannel(this.data[index])
        .then((res) => {
          this.loading = false

          if (res.status) {
            this.$message.success('保存成功')
            return true
          }

          return false
        })
        .catch((err) => {
          this.loading = false
          return false
        })
    },
    getSubChannelData(tag) {
      getSubChannel({
        tag: tag,
      }).then((res) => {
        if (res.status) {
          this.subChannel = res.data
        }
      })
    },
    handleAddMerchantChannel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          saveMerchantChannel({
            ...this.addMerchantChannel,
            common_banks: this.commonbanksData,
          })
            .then((res) => {
              if (res.status) {
                this.$message.success('保存成功')
                this.getData()
                this.addMerchantChannelVisible = false
                this.addMerchantChannel = {}
              }
              this.loading = false
            })
            .catch((err) => {
              this.loading = false
            })
          this.$refs[formName].resetFields()
        } else {
          return false
        }
      })
    },
  },
}
</script>